<template>
  <div>
    <el-upload
      accept="image/png,image/jpeg,image/jpg,image/gif"
      class="avatar-uploader quill-img"
      :before-upload="getcloudDataMthod"
      action="/file/fileMapping/uploadAvatarVIPHall"
      :multiple="false"
      :show-file-list="false"
      :on-success="uploadSuccess"
      :data="uploadFileData"
    >
    </el-upload>
    <div v-show="visible">
      <div>
        <div class="productOrder-container" v-show="showTable">
          <!--  relicMapSearch 商品信息展示的第一部分 -->
          <div class="">
            <div class="">
              <el-form
                :inline="true"
                class="demo-form-inline"
                size="mini"
                :model="cForm"
              >
                <el-form-item>
                  <el-input
                    size="mini"
                    v-model="inputguanone"
                    placeholder="商品名称"
                    class="input"
                  />
                </el-form-item>
                <!-- ------------ -->
                <el-form-item>
                  <el-select
                    clearable
                    placeholder="商品类型"
                    v-model="commoditytype"
                    @change="handler2($event)"
                    class="select"
                  >
                    <el-option
                      :label="c2.typeName"
                      :value="c2.typeId"
                      v-for="c2 in list2"
                      :key="c2.id"
                    ></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item>
                  <el-select
                    clearable
                    placeholder="审核"
                    v-model="cForm.status"
                    @change="handler5($event)"
                    class="select"
                  >
                    <el-option
                      :label="c3.title"
                      :value="c3.id"
                      v-for="c3 in list5"
                      :key="c3.id"
                    ></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item>
                  <!-- <el-checkbox v-model="checked">已售罄</el-checkbox> -->
                  <el-checkbox
                    v-model="checked"
                    size="mini"
                    class="shou"
                    @change="selling"
                    >已售罄</el-checkbox
                  >
                </el-form-item>
                <el-form-item>
                  <el-button class="same" size="mini" @click="query"
                    >查询</el-button
                  >
                </el-form-item>
                <el-form-item>
                  <el-button
                    class="el-icon-plus same"
                    size="mini"
                    @click="showdiag"
                    >添加</el-button
                  >
                </el-form-item>
              </el-form>
            </div>
          </div>
          <el-table
            :data="records"
            border
            size="small"
            stripestyle="width: 100%"
            :header-cell-style="{
              color: '#fff',
              background: '#6090EC',
              fontSize: '11px',
              fontWeight: 'normal',
            }"
          >
            <el-table-column
              label="编号"
              width="50"
              align="center"
              prop="productId"
            >
            </el-table-column>
            <el-table-column
              prop="imgPath"
              label="商品图片"
              width="100"
              align="center"
            >
              <template slot-scope="scope">
                <img
                  slot="reference"
                  :src="scope.row.imgPath"
                  style="width: 55px; height: 55px"
                />
              </template>
            </el-table-column>
            <el-table-column
              prop="productName"
              label="商品名称"
              width="width"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="productType"
              label="商品类型"
              width="100px"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="memberPrice||originalPrice||marketPrice||salePrice"
              label="价格"
              width="120"
              align="center"
              id="price"
            >
              <template slot-scope="scope">
                <p id="price">
                  <span>市场{{ scope.row.marketPrice }}</span>
                  <span>成本{{ scope.row.originalPrice }}</span>
                  <span>销售{{ scope.row.salePrice }}</span>
                  <span>会员{{ scope.row.memberPrice }}</span>
                </p>
              </template>
            </el-table-column>
            <el-table-column
              prop="stockCount"
              label="库存"
              width="80"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="supplierName"
              label="供应商"
              width="70"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="createTime"
              label="创建时间"
              width="140"
              align="center"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.createTime }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="updateTime"
              label="更新时间"
              width="140"
              align="center"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.updateTime }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="ifpass"
              label="审核"
              width="50"
              align="center"
            >
              <template slot-scope="{ row }">
                <button
                  :class="row.ifpass == '未审' ? 'redcolor' : 'bluecolor'"
                  size="mini"
                  id="shenhe"
                >
                  <span>{{ row.ifpass }}</span>
                </button>
              </template>
            </el-table-column>
            <el-table-column prop="sort" label="排序" width="50">
            </el-table-column>
            <el-table-column label="操作" fixed="right" align="center">
              <!-- eslint-disable-next-line -->
              <template slot-scope="{ row, $index }">
                <p id="button">
                  <el-button
                    @click="editpic(row)"
                    style="background: #6090ec; color: #fff"
                    size="mini"
                    id="btn"
                    >图片
                  </el-button>
                  <el-button
                    @click="rule(row)"
                    style="background: #6090ec; color: #fff"
                    size="mini"
                    id="btn"
                    >积分规则
                  </el-button>
                  <el-button
                    style="background: #6090ec; color: #fff"
                    size="mini"
                    @click="deletct(row)"
                    id="btn"
                    >删除
                  </el-button>
                  <el-button
                    @click="edit(row)"
                    type="warning"
                    size="mini"
                    id="btn"
                    >修改</el-button
                  >
                </p>
              </template>
            </el-table-column>
          </el-table>
          <el-dialog
            title="积分规则"
            :close-on-click-modal="false"
            :visible.sync="dialogFormVisible"
          >
            <div class="activitytypeone">
              <span class="leixing"> 使用规则 </span>
              <ul class="attrul">
                <li
                  v-for="(item, index) in typearrlist"
                  :key="index"
                  @click="rowClick(index, item)"
                >
                  <span class="sty" :class="{ activeClass: active == index }">{{
                    item.title
                  }}</span>
                  <i
                    class="el-icon-check"
                    :class="{ act: active == index }"
                  ></i>
                </li>
              </ul>
            </div>
            <p class="rulezhe">
              <span
                ><i>折扣规则</i><input v-model="rulevalue" /><span id="one"
                  >积分抵一元 *</span
                ></span
              >
              <span v-show="active == 1"
                ><i>百分比：</i><input placeholder="请输入可用积分百分比" />
                <span id="stars"> *</span>
              </span>
            </p>

            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false"> 保存</el-button>
              <el-button
                style="background: #6090ec; color: #fff"
                @click="dialogFormVisible = false"
                >关闭</el-button
              >
            </div>
          </el-dialog>
          <div class="block" style="margin-top: 15px">
            <el-pagination
              align="center"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 15, 20]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      title="添加商品"
      :close-on-click-modal="false"
      :visible.sync="addDIalogVisible"
      width="90%"
    >
      <el-form
        :model="add"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="商品名称">
          <el-input placeholder="请输入商品名称" v-model="add.productName">
          </el-input>
        </el-form-item>

        <div class="gongying">
          <div class="shang">
            <!-- <el-form-item label="商品类型">
              <el-select clearable placeholder="商品类型" v-model="add.typeId" @change="handler2($event)" class="select">
                <el-option :label="c2.typeName" :value="c2.typeId" v-for="c2 in list2" :key="c2.id"></el-option>
              </el-select>
            </el-form-item> -->
            <el-form-item label="商品单位">
              <el-input v-model="add.unit" placeholder="请输入单位" @input="inpChange($event)"></el-input>
            </el-form-item>
          </div>

          <div class="shang">
            <el-form-item label="商品属性">
              <el-select
                placeholder="商品属性"
                v-model="add.propertyTypeId"
                @change="listfn"
                clearable
              >
                <el-option
                  :label="tm.title"
                  :value="tm.id"
                  v-for="tm in list4"
                  :key="tm.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <!-- 一级分类的数组 -->
            <el-form-item label="商品分类">
              <el-select
                placeholder="一级分类"
                v-model="add.categoryPid"
                @change="ccategoryPid"
                clearable
              >
                <el-option
                  :label="tm.name"
                  :value="tm.id"
                  v-for="tm in list3"
                  :key="tm.id"
                ></el-option>
                <!-- classify -->
              </el-select>
            </el-form-item>
            <!-- 二级分类的数组 -->
            <el-form-item>
              <el-select
                placeholder="二级分类"
                v-model="add.categoryCid"
                @change="categoryCid"
                clearable
              >
                <el-option
                  :label="tm.name"
                  :value="tm.id"
                  v-for="tm in twoclass"
                  :key="tm.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>

        <el-form-item label="型号规格">
          <el-button
            style="background: #6090ec; color: #fff"
            icon="el-icon-plus"
            @click="addSaleAttr"
            >添加型号规格
          </el-button>
          <el-table
            :data="add.mallProductSpec"
            size="mini"
            border
            style="width: 95%; margin-top: 15px"
            :header-cell-style="{
              color: '#fff',
              background: '#6090EC',
              fontSize: '11px',
              fontWeight: 'normal',
              height: '50px',
            }"
          >
            <el-table-column
              type="index"
              prop="productSpecId"
              label="编号"
              width="80px"
              align="center"
            >
            </el-table-column>
            <el-table-column align="center" prop="specName" label="商品规格">
              <!-- eslint-disable-next-line -->
              <template slot-scope="scope">
                <el-input
                  ref="specName"
                  v-model="scope.row.specName"
                  placeholder="商品规格"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="salePrice"
              label="销售"
              width="width"
            >
              <!-- eslint-disable-next-line -->
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.salePrice"
                  placeholder="销售"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="memberPrice"
              label="会员价"
              width="width"
            >
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.memberPrice"
                  placeholder="会员价"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="originalPrice"
              label="成本"
              width="width"
            >
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.originalPrice"
                  placeholder="成本"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="marketPrice"
              label="市场"
              width="width"
            >
              <!-- eslint-disable-next-line -->
              <template slot-scope="scope">
                <el-input
                  v-model.number="scope.row.marketPrice"
                  placeholder="市场"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="stockCount"
              label="库存"
              width="width"
            >
              <template slot-scope="scope">
                <el-input
                  v-model.number="scope.row.stockCount"
                  placeholder="库存"
                ></el-input>
              </template>
            </el-table-column>

            <el-table-column align="center" label="操作" width="width">
              <template slot-scope="scope">
                <el-button
                  type="primary"
                  size="mini"
                  @click="deletmallProductSpec(scope.row, scope.$index)"
                  >删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>

        <el-form-item label="简介">
          <el-input
            type="textarea"
            rows="4"
            placeholder="请输入简介"
            v-model="add.introduce"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            type="textarea"
            rows="4"
            placeholder="备注"
            v-model="add.remarks"
          ></el-input>
        </el-form-item>
        <el-form-item label="图片">
          <el-upload
            action="/file/fileMapping/uploadAvatarMall"
            list-type="picture-card"
            :on-success="handlePictureCardPreview"
            :on-remove="handleRemove"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <div class="quilleditor">
          使用说明：
          <quill-editor
            v-model="str"
            ref="myQuillEditor"
            :value="quillContent"
            :options="editorOption"
            @change="onEditorChange"
          ></quill-editor>
        </div>
        <div class="switch">
          <!-- 审核<el-switch v-model="value1" active-color="#13ce66" inactive-color="#ff4949" active-value="1"
            inactive-value="0">
          </el-switch> -->

          支持配送<el-switch
            v-model="value3"
            active-value="1"
            inactive-value="0"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </div>
        <div class="last-two">
          <span>排序 :</span>
          <el-input
            v-model.number="add.sort"
            placeholder="请输入排序编号"
            class="input"
          />
        </div>
        <el-form-item>
          <el-button
            style="background: #6090ec; color: #fff"
            @click="addOrUpdateSpu"
            class="green el-icon-folder"
            >保存
          </el-button>
          <el-button @click="closeAddDialog" class="green el-icon-close"
            >关闭</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
const toolbarOptions = [
  ["bold", "italic", "underline", "strike"],
  [
    {
      header: 1,
    },
    {
      header: 2,
    },
  ],
  [
    {
      list: "ordered",
    },
    {
      list: "bullet",
    },
  ],
  [
    {
      indent: "-1",
    },
    {
      indent: "+1",
    },
  ],
  [
    {
      direction: "rtl",
    },
  ],
  [
    {
      color: [],
    },
    {
      background: [],
    },
  ],
  [
    {
      align: [],
    },
  ],
  ["image"],
];
export default {
  props: {
    quillContent: {
      type: String,
      default: "",
    },
  },
  data() {
    const _this = this;
    return {
      productImgList: [],
      addDIalogVisible: false,
      fenlei: "", //商品分类
      imgmore: "",
      pictureUrl: "",
      uploadFileData: null,
      editorOption: {
        theme: "snow",
        modules: {
          toolbar: {
            container: toolbarOptions,
            handlers: {
              image(value) {
                if (value) {
                  document.querySelector(".quill-img input").click();
                } else {
                  _this.quill.format("image", false);
                }
              },
            },
          },
        },
      },
      rulevalue: 100,
      typearrlist: [
        {
          id: 0,
          title: "积分没有上限",
        },
        {
          id: 1,
          title: "积分使用比例",
        },
        {
          id: 2,
          title: "不允许使用积分",
        },
      ],
      dialogTableVisible: false, //弹框的设置
      visible: true,
      pictureUrl: "",
      active: 0,
      logoUrl: "",
      //  uploadUrl: "/system/editfile/upload",//文件上传接口
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页的数据条数
      //代表的分页器第几页
      page: 1,
      //当前页数展示数据条数
      limit: 3,
      //总共数据条数
      total: 0,
      allProductSpec: [],
      arrList: [],
      addshuxing: null, //商品属性
      businesstype: null, //商品类型
      paixu: null, //排序
      typexing: 0, //商品类型
      addes: {},
      list: [
        {
          id: 1,
          rid: 123,
        },
        {
          id: 2,
          rid: 456,
        },
        {
          id: 3,
          rid: 7777,
        },
      ],
      current: "",
      // 商品详情二级分类
      twoclass: [],
      expected: "供应商供应商供应商",
      as: "",
      // value1:
      value1: 0,
      value2: null,
      value3: null,
      value4: 0,
      // 都是v-model绑定值
      gongying: "", //供应商
      business: JSON.parse(localStorage.getItem("employeesInformation"))
        .supplierId, //带参掉供应商列表
      commoditytype: "", //商品类型
      category: "", //商品分类
      property: "", //属性绑定值
      inputguanone: "", //关键字搜索 商品名称
      showTable: true, //控制两个盒子的显示与隐藏
      // 第一个div信息
      checked: false, // 收集已售罄信息
      // 供应商的数据
      list1: [],
      //商品类型的数据
      list2: [],
      //商品分类的数据
      list3: [],
      supplier: [], //供应商商品
      //商品属性的数据
      list4: [
        {
          id: 0,
          title: "实物",
          select: 1,
        },
        {
          id: 1,
          title: "活动码",
          select: 2,
        },
        {
          id: 2,
          title: "会员卡",
          select: 3,
        },
      ],
      //审核状态的数据
      list5: [
        {
          id: 0,
          title: "未审",
        },
        {
          id: 1,
          title: "已审",
        },
        {
          id: 2,
          title: "全部",
        },
      ],
      //收集商品展示的数据
      cForm: {},
      total: 0, //分页器一共需要展示数据的条数
      //控制对话框的显示与隐藏
      dialogTableVisible: false,
      spu: {},
      // 下面的div属性
      as: [],
      // 审核的按钮
      // 富问本绑定的内容
      supplier: [], //供应商数组
      caterolytype: [], //商品类型数组
      units: [], //商品单位数组
      attr: [], //商品属性
      classify: [], //商品分类
      twoclassify: [], //二级分类
      attrIdAndAttrName: "", //收集未选择的销售属性的id-----
      //   添加数据的变量
      add: {
        sort:"",
        remarks:"",
        unit:"",
        spuSaleAttrList: [], //添加表格数据
        gyarr: "",
        classify: "",
        mallProductSpec: [],
        tableData: [], //表格的数组 假数据
        units: "",
        productName: "", //商品名称
        introduce: "", //简介
        inputguan: null, //排序编号
        useIntro: "",
        shuxing: 0,
      },
      supplierdetail: [], //供应商数据
      listvalue: "", //编辑后的商品属性
      item1: null,
      item2: null,
      item3: null,
      item4: null,
      item5: null,
      item6: null,
      mallProductSpec: [],
      tip: null,
      result: null,
      dialogImageUrl: "",
      imgPiathpic: "",
      dialogFormVisible: false,
      str: null,
      json_fields: {
        //导出Excel表格的表头设置
        编号: "productId",
        图片地址: "imgPath",
        商品名称: "productName",
        销售单价: "salePrice",
        市场价: "marketPrice",
        会员价: "memberPrice",
        成本价: "originalPrice",
        市场价: "marketPrice",
        库存: "stockCount",
        供应商名称: "supplierName",
        创建时间: "createTime",
        更新时间: "updateTime",
        审核: "ifpass",
        排序: "sort",
      },
      records: [],
    };
  },
  mounted() {
    // 后台商品列表数据
    this.getproductlist();
    //后台的供应商列表数据 单独接口
    this.getsupplier();
    // 后台的商品类型 单独接口
    this.getcommodity();
    // 后台的商品类型
    this.getclassification();
    // this.updateMallProduct();
    console.log(JSON.parse(localStorage.getItem("employeesInformation")));
  },
  created() {},
  methods: {
    uploadSuccess(res) {
      console.log(res);
      this.str = res;
      this.str = this.str[0];
      console.log(this.str);
      const quill = this.$refs.myQuillEditor.quill;
      quill.focus();
      quill.insertEmbed(quill.getSelection().index, "image", res[0]);
    },
    onEditorChange(e) {
      console.log(e);
      this.$emit("update:quillContent", e.html);
    },
    getcloudDataMthod() {},
    shenhe(row, index) {
      this.$message({
        type: "success",
        message: "操作成功",
      });
      console.log(row, index);

      this.records.splice(index, 1);
    },
    // 积分规则的点击事件
    rowClick(index, row) {
      this.active = index;
      console.log(index);
      if (index == "0") {
        this.typeid = 10;
      } else if (index == "2") {
        this.typeid = 20;
      } else if (index == "3") {
        this.typeid = 30;
      }
    },
    // 点击积分规则
    rule() {
      this.dialogFormVisible = true;
    },
    // 商品规格列表删除
    deletmallProductSpec(row, index) {
      console.log(row, index);
      this.add.mallProductSpec.splice(index, 1);
    },
    // 表格里的拿到图片
    editpic(row) {
      console.log(row);
      this.visible = false;
      this.imgPiathpic = row.imgPath;
    },
    //点击查询 掉接口
    query() {
      this.getproductlist();
    },
    // 后台商品列表
    getproductlist() {
      localStorage.setItem("isToken", true);
      this.$axios
        .getproductlist({
          id: this.business,
          typeld: this.businesstype,
          categoryPid: this.fenlei,
          propertyTypeId: this.shangproperty,
          ifpass: this.shenstate,
          productName: this.inputguanone,
          sellOut: this.checked,
        })
        .then((res) => {
          if (
            JSON.parse(localStorage.getItem("employeesInformation"))
              .supplierId != null
          ) {
            this.records = res.data;
            console.log(res);
            this.total = res.total;
            console.log(this.total);
          } else {
            this.records = [];
            this.$message({
              message: "您不是供应商，暂无权限",
              type: "warning",
            });
          }
        });
      
    },
    // 第一个页面的添加按钮
    showdiag() {
      this.add.spuSaleAttrList = [];
      this.add.mallProductSpec = [];
      this.add.tableData = [];
      this.add.gyarr = "";
      this.add.classify = "";
      this.add.units = "";
      this.add.productName = "";
      this.add.introduce = "";
      this.add.units = "";
      this.add.inputguan = null;
      this.add.useIntro = "";
      this.add.shuxing = "";
      this.add.remarks = "";
      this.productId = "";
      this.addDIalogVisible = true;
      this.add.sort = "";
      this.add.unit = "";
    },

    // 一级分类的数组
    ccategoryPid(id) {
      console.log(id);
      for (let i = 0; i < this.list3.length; i++) {
        if (id == this.list3[i].id) {
          this.twoclass = this.list3[i].mallCategoryVoList;
        }
      }
    },
    // 二级分类
    categoryCid(item) {
      // console.log(item);
    },
    // 点击售事件
    selling() {},
    //删除事件
    deletct(row) {
      console.log(row.productId);
      this.$confirm(`你确定删除吗`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          this.deleteMallProduct(row.productId);
          this.$message({
            message: "删除成功",
            type: "success",
          });
        })
        .catch(() => {
          this.$message({
            message: "已取消删除",
            type: "warning",
          });
        });
    },
    deleteMallProduct(id) {
      this.$axios
        .deleteMallProduct({
          productId: id,
        })
        .then((res) => {
          this.getproductlist(); //查询数据
          // return res
        });
    },
    // 第二个div 关闭按钮
    closeAddDialog() {
      this.addDIalogVisible = false;
    },
    // 添加型号按钮
    addSaleAttr() {
      this.add.mallProductSpec.push({});
    },
    // 第二个div 保存按钮
    addOrUpdateSpu() {
      if (this.tip == true) {
        if (this.add.productName !== "") {
          this.addMallProduct(); // tip true 是true掉添加
        } else {
          this.$message({
            type: "success",
            message: "输入名称不能为空",
          });
        }
      } else {
        this.updateMallProduct(); // 修改后台的商品详情
        this.showTable = true;
      }
      this.business = JSON.parse(
        localStorage.getItem("employeesInformation")
      ).supplierId;
      this.add.supplierId = JSON.parse(
        localStorage.getItem("employeesInformation")
      ).supplierId;
    },
    handlePictureCardPreview(file, filelist) {
      this.productImgList.push(file[0]);
      console.log(this.productImgList);
    },
    // 删除图片
    handleRemove(file, filelist) {
      console.log(file, filelist);
      for (let i = 0; i < this.productImgList.length; i++) {
        if (this.productImgList[i] == file.response[0])
          this.productImgList.splice(i, 1);
      }
      console.log(this.productImgList);
    },
    // 后台添加的接口
    addMallProduct() {
      localStorage.setItem("isToken", true);
      this.$axios
        .addMallProduct({
          supplierId: JSON.parse(localStorage.getItem("employeesInformation"))
            .supplierId,
          productName: this.add.productName,
          propertyTypeId: this.add.propertyTypeId,
          introduce: this.add.introduce,
          useIntro: this.str,
          unit: this.add.unit,
          ifpass: this.value1,
          ifpickup: this.value2,
          ifdistribution: this.value3,
          sort: this.add.sort,
          mallProductSpec: this.add.mallProductSpec,
          imgPaths: this.productImgList,
        })
        .then((res) => {
          // conso.log(res);
          if (res.code == 200) {
            this.addDIalogVisible = false;
            this.$message({
              type: "success",
              message: "添加商品成功",
            });
          }
          this.getproductlist();
        });
      
    },

    // 修改后台的商品详情
    updateMallProduct() {
      this.$axios
        .updateMallProduct({
          productId: this.productId, //商品id
          productName: this.add.productName, //	商品名称
          specName: "",
          propertyTypeId: this.add.propertyTypeId, //商品属性  1.实物 2.活动码 3.会员卡
          introduce: this.add.introduce, //简介
          ifpass: this.value1, // 是否审核
          ifpickup: this.value2, // 是否支持自提，
          ifdistribution: this.value3, // 是否支持配送
          hot: this.value4, // 是否为热销商品
          sort: this.add.sort, //排序
          useIntro: this.str, //使用说明
          mallProductSpec: this.add.mallProductSpec,
        })
        .then((res) => {
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: "修改成功",
            });
          }
          this.getproductlist();
        });
      
    },
    // 当商品类型里面的值发生变化时的函数
    caterolytypes(value) {
      console.log(value);
      this.caterolytypevalue = value;
    },
        // 分页
     handleSizeChange(value) {
      console.log("1", value);
      localStorage.setItem("pageSize", value);
      localStorage.setItem("pageNum", 1);
      this.getproductlist();
      this.pageSize = value;
    },
    handleCurrentChange(value) {
      console.log("2", value);
      localStorage.setItem("pageNum", value);
      localStorage.setItem("pageSize", this.pageSize);
      this.currentPage=value
      this.getproductlist();
      // orders = res.data;
    },
    // 当商品属性里面的值发生变化时的函数
    listfn(value) {
      this.listvalue = value; //将改变后的值赋值给listvalue =商品属性
      console.log(this.listvalue);
    },

    // // 详情接口
    edit(row) {
      this.addDIalogVisible = true;
      this.productId = row.productId;
      localStorage.setItem("isToken", true);
      this.$axios
        .getproductBackstageDetails({
          productId: this.productId,
        })
        .then((res) => {
          this.add = res.data;
          this.value1 = this.add.ifpass;
          this.value2 = this.add.ifpickup;
          this.value3 = this.add.ifdistribution;
          this.value4 = this.add.hot;
          this.str = this.add.useIntro; //使用说明
          this.getsupplier(res.data.supplierId); //供应商
          this.getclassification(res.data.categoryPid); //商品分类
        });
      
    },
    // 供应商调取数据的方法
    handler1(row) {
      this.business = row; //拿到供应商编号
    },
    //  商品类型的事件
    handler2(row) {
      console.log(row);
      this.businesstype = row;
    },
    //商品分类的事件回调
    handler3(row) {
      console.log(row);
      this.fenlei = row;
    },
    //商品属性的事件回调
    handler4(row) {
      this.shangproperty = row;
    },
    //审核状态的事件回调
    handler5(row) {
      this.shenstate = row;
      console.log(this.shenstate);
    },
    handleSizeChange(value) {
      console.log("1", value);
      localStorage.setItem("pageSize", value);
      localStorage.setItem("pageNum", 1);
      this.query();
      this.pageSize = value;
    },
    handleCurrentChange(value) {
      // debugger;
      localStorage.setItem("pageNum", value);
      localStorage.setItem("pageSize", this.pageSize);
      this.getproductlist();
    },

    //供应商列表
    getsupplier(id) {
      // console.log(id);
      localStorage.setItem("isToken", true);
      this.$axios.getsupplier({}).then((res) => {
        let arr = JSON.parse(JSON.stringify(res.data));
        arr.forEach((item) => {
          item.id = item.id * 1;
        });
        this.list1 = arr;
      });
      
    },
    //商品类型
    getcommodity() {
      localStorage.setItem("isToken", true);
      this.$axios.getcommodity({}).then((res) => {
        this.list2 = res.data;
      });
      
    },
    // 商品分类
    getclassification(ids) {
      console.log(ids);
      // debugger
      localStorage.setItem("isToken", true);
      this.$axios.getclassification({}).then((res) => {
        this.list3 = JSON.parse(JSON.stringify(res.data));
        let arr = this.list3.filter((item) => {
          if (item.id == ids) {
            return item; //是把一级分类的数组取出来了
          }
        });
        let arr1 = arr.map((item) => {
          return item.mallCategoryVoList; //把数组中的二级分类取出来 给arr1
        });
        console.log(res.data, this.list3);

        this.twoclass = arr1[0];
        console.log(this.twoclass);
      });
      
    },
    inpChange(e) {
      this.$forceUpdate();
    },
  },
};
</script>
<style scope>
.upload-box {
  display: flex;
}

.tupian {
  margin: 50px;
  line-height: 80px;
}

.tupian img {
  width: 188px;
  height: 151px;
}

.visible {
  display: block;
}

.productOrder-container {
  padding: 25px;
}

.relicMapSearch {
  display: flex;
}

.select {
  width: 120px;
  height: 50px;
  min-height: 50px;
  position: relative;
}

.left-select {
  width: 660px;
  height: 80px;
}

.right-select {
  width: 580px;
  height: 80px;
}

.input {
  width: 200px;
}

.shou {
  padding: 0px 10px;
}

.same {
  width: 90px;
  background-color: #6090ec;
}

/* 下面的div */
.switch {
  width: 80%;
  margin-left: 50px;
  margin-top: 70px;
  height: 50px;
  position: relative;
}

.switch .el-switch {
  padding: 0px 20px;
}

.last-two {
  display: inline-flex;
  margin-bottom: 20px;
}

.last-two span {
  width: 80px;
  height: 20px;
  margin-left: 20px;
  line-height: 20px;
  margin-top: 10px;
}

/* 供应商6个布局 */
.gongying .shang {
  width: 1206px;
  display: inline-flex;
}

.gongying .shang .el-select {
  width: 220px;
  padding: 0px 30px;
}

.el-tag + .el-tag {
  margin-left: 10px;
}

.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}

.quilleditor {
  width: 100%;
  display: flex;
  height: 300px;
  position: relative;
}

.quilleditor .quill-editor {
  width: 80%;
}

.imgPath img {
  width: 100%;
  height: 50px;
}

.activitytypeone {
  display: flex;
}

.attrul {
  display: flex;
}

.attrul li {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  height: 40px;
  border: 1px solid #ccc;
  border-radius: 2px;
  margin-left: 15px;
}

.attrul li span:nth-of-type(1) {
  width: 100%;
  color: #fff;
  display: inline-block;
  height: 40px;
  font-size: 15px;
  line-height: 40px;
  text-align: center;
  background-color: #c9c9c9;
}

.attrul li i:nth-of-type(1) {
  width: 50px;
  text-indent: 0.2rem;
  line-height: 40px;
  color: #fff;
}

.act {
  color: #5fb878 !important;
}

.activeClass {
  display: inline-block;
  width: 100%;
  height: 40px;
  font-size: 15px;
  line-height: 40px;
  text-align: center;
  color: #fff;
  background-color: #5fb878 !important;
}

.leixing {
  margin-top: 10px;
}

.rulezhe {
  margin-top: 20px;
}

.rulezhe span {
  display: inline-block;
  display: flex;
  margin-top: 20px;
  flex: 1;
}

.rulezhe i {
  display: inline-block;
  width: 80px;
  font-style: normal;
}

#el-input {
  width: 38%;
}

#one {
  color: red;
  margin-left: 10px;
  margin-top: 8px;
}

#stars {
  color: red;
}

#stars {
  margin-left: 10px;
}

#price span {
  font-size: 12px;
  color: #fff;
  width: 60%;
  height: 20px;
  padding-left: 2px;
}

#price span:nth-of-type(1) {
  display: inline-block;

  background-color: #ff5722;
}

#price span:nth-of-type(2) {
  display: inline-block;

  background-color: #009688;
}

#price span:nth-of-type(3) {
  display: inline-block;

  background-color: #1e9fff;
}

#price span:nth-of-type(4) {
  display: inline-block;
  background-color: #ffb800;
}

#button #btn {
  margin-bottom: 10px;
}

#shenhe {
  width: 30px;
  font-size: 10px;
  background-color: #6090ec;
  color: #fff;
  border: 0;
}

.same {
  background-color: #6090ec;
  color: #ffff;
}

.blueBtn {
  font-size: 14px;
  float: right;
  width: 100px;
  height: 26px;
  color: #ffff;
  line-height: 26px;
  text-align: center;
  background-color: #6090ec;
}

.el-button {
  margin-right: 7px;
}


.redcolor {
  background-color: #ff5722 !important;
}

.bluecolor {
  background-color: #6090ec;
}
</style>